<div>
  <form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" (ngSubmit)="query()" style="margin-bottom: 10px;">
    <nz-form-item>
      <nz-form-label [nzSm]="8">年份月份</nz-form-label>
      <nz-form-control [nzSm]="16">
        <nz-month-picker formControlName="monthPicker" [nzPopupStyle]="{'border': '1px solid rgba(0,0,0,.1)'}"
          [nzDisabledDate]="disabledDate"></nz-month-picker>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control [nzSm]="{ span: 15, offset: 3 }">
        <button nz-button nzType="primary">确定</button>
      </nz-form-control>
    </nz-form-item>
  </form>
  <nz-skeleton [nzLoading]="loadingData" [nzActive]="true">
    <nz-table #nzTable [nzScroll]="lockHeadScroll2" nzSize="small" nzBordered [nzData]="data"
      [nzShowPagination]="false">
      <thead>
        <tr>
          <th nzAlign="center" nzWidth="35%">车间名称</th>
          <th nzAlign="center" nzWidth="15%">年度</th>
          <th nzAlign="center" nzWidth="15%">月度</th>
          <th nzAlign="center" nzWidth="15%">计划数目</th>
          <th nzAlign="center">完成数目</th>
        </tr>
      </thead>
      <tbody>
        <ng-template ngFor let-data [ngForOf]="nzTable.data">
          <ng-template ngFor let-item [ngForOf]="expandDataCache[data.orgid]">
            <tr *ngIf="(item.parent&&item.parent.expand)||!(item.parent)">
              <td nzAlign="center" [nzIndentSize]="item.level*15" [nzShowExpand]="!!item.children"
                [(nzExpand)]="item.expand" (nzExpandChange)="collapse(expandDataCache[data.orgid],item,$event)">
                {{ item?.orgname }}
              </td>
              <td nzAlign="center">{{ item?.years }}年</td>
              <td nzAlign="center">{{ item?.months }} 月份</td>
              <td nzAlign="center"><a (click)="scanDetails($event, item, 0)"
                  [class]="item.sums>0?'scanning':'normal-zero'">{{ item?.sums }}</a>&nbsp;条
              </td>
              <td nzAlign="center"><a (click)="scanDetails($event, item, 1)"
                  [class]="item.overs>0?'scanning':'normal-zero'">{{ item?.overs }}</a>&nbsp;条
              </td>
            </tr>
          </ng-template>
        </ng-template>
      </tbody>
    </nz-table>
  </nz-skeleton>
</div>

<nz-modal nzTitle="月计划统计完成率明细列表" [(nzVisible)]="modalVisible" [nzWidth]="1200" [nzCancelText]=null
  (nzOnOk)="modalVisible=false" (nzOnCancel)="modalVisible=false">
  <nz-spin nzSize="small" [nzSpinning]="loadingDetail" [nzDelay]="200">
    <nz-table nzSize="small" [nzScroll]="lockHeadScroll" nzBordered nzShowSizeChanger [nzData]="detailData"
      [nzFrontPagination]="false" [nzScroll]="detailScroll">
      <thead>
        <tr>
          <th nzAlign="center" nzWidth="50px">序号</th>
          <th nzAlign="center" nzWidth="8%">车站</th>
          <th nzAlign="center" nzWidth="8%">作业类型</th>
          <th nzAlign="center" nzWidth="8%">项目</th>
          <th nzAlign="center" nzWidth="5%">作业周次</th>
          <th nzAlign="center" nzWidth="5%">计划日期</th>
          <th nzAlign="center" nzWidth="10%">设备名称</th>
          <th nzAlign="center" nzWidth="8%">责任人</th>
          <th nzAlign="center" nzWidth="8%">作业等级</th>
          <th nzAlign="center" nzWidth="8%">天窗</th>
          <th nzAlign="center" nzWidth="8%">上道</th>
          <th nzAlign="center">备注</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of detailData; let i = index">
          <td nzAlign="center" class="text-blue-8 narrow">{{ i + 1 }}</td>
          <td nzAlign="center" class="narrow">{{ data?.staname }}</td>
          <td class="narrow">{{ data?.worktype }}</td>
          <td class="narrow">{{ data?.project }}</td>
          <td nzAlign="center" class="narrow">{{ data?.weekIndex == '第周' ? '第1周' : data?.weekIndex}}</td>
          <td nzAlign="center" class="narrow">{{ data?.workdaystr }}</td>
          <td nzAlign="center" class="narrow">{{ data?.devname }}</td>
          <td nzAlign="center" class="narrow">{{ data?.vcWacharger }}</td>
          <td nzAlign="center" class="narrow">{{ data?.worklevel }}</td>
          <td class="narrow">{{ data?.needshywin }}</td>
          <td class="narrow">{{ data?.needroad }}</td>
          <td class="narrow">{{ data?.vcnote }}</td>
        </tr>
      </tbody>
    </nz-table>
  </nz-spin>
</nz-modal>